https://cypress.io logo
Join Discord
Powered by
# e2e-testing
  • p
    Copy code
    cy.click() failed because it requires a DOM element.

The subject received was:

> undefined

The previous command that ran was:

> cy.should()
  • p
    Code:
    Copy code
    (subject ? cy.wrap(subject) : cy)
        .get(`.button-y`)
        .eq(index)
        .parent()
        .find('.button-x')
        .should('not.have.attr', 'disabled')
        .click()
  • g
    oh my, all sorts of logic that might assume the DOM part is not going to be re-rendered by the application. https://on.cypress.io/retry-ability is a good read
  • p
    I kind of disagree, it failed on many occasions for clicking element that's disabled.
  • p
    retryability
    , I am already using it, but it's not going to help when cypress already returns 
    undefined
    subject
  • p
    the 
    should
    assertion is successful but it simply doesn't return element
  • p
    Nope, as mentioned, it doesn't help.
  • g
    well, fine, I cannot convince you without an example I can run, so whatever works for you
  • p
    @gray-kilobyte-89541 , it's exactly the same example provided, the whole issues evolves around that code actually
  • p
    @gray-kilobyte-89541 : If I remove this line, randomly it failed cuz the button is disabled (even it's not):
    Copy code
    (subject ? cy.wrap(subject) : cy)
        .get(`.button-y`)
        .eq(index)
        .parent()
        .find('.button-x')
        .should('not.have.attr', 'disabled') // this line
        .click()
  • t
    What's the reason behind getting button-y, then moving back and forth in the index and then finding button-x? It seems to me like you could simplify that by doing .get pointing to the specific div & element needed in one command. I have some more complex selectors because we don't use [data-cy=] tags in our code, but it works better pinpointing the exact element to work with. Like this:
    Copy code
    js
cy.get('.quantity > .control-group > input')
  • p
    @thousands-house-85089 , getting the element is fine, I hover on it and it shows whats captured on the screen, I just changed the string before writing it here honestly, but think of it similar to this:
    Copy code
    (subject ? cy.wrap(subject) : cy)
        .get(`label`)
        .eq(index)
        .parent() // div
        .find('button')
        .should('not.have.attr', 'disabled') // this line
        .click()
    HTML code:
    Copy code
    <div>
  <label>Some label</label>
  <button>Some button</button>
</div>
  • p
    I think this is the best option for now (it's actually my current workaround for now). I'll go to sleep as I'm falling asleep. I am giving the 
    .click()
    a chance without the 
    should
    for checking if button enabled or not. and see how it goes
  • g
    is this Cypress v12 or below? I wonder if the entire DIV is re-rendered at some point (removing the button disabled attribute)
  • p
    But just to say it, that problem before I add the 
    should
    , it used to fail 6/10 times of retrying the tests
  • t
    That's my best suggestion, I got nothin' else. good luck 🙂
  • p
    latest version @gray-kilobyte-89541
  • p
    It's not re-rendered, I know what you mean. But here is what exactly happens:
  • p
    - 
    div
    shows app with a 
    label
    , 
    button (disabled)
    and 
    loading circle
    indicator - Cypress gets that 
    div
    while the loading is still in progress and 
    button
    is still disabled - that 
    loading circle
    indicator goes away (gets removed) - that 
    button
    becomes enabled The application is Angular v13 FYI
  • p
    Goodnight everyone 👍, I'll keep monitoring, I am trying again without 
    should
    and if it happens to fail again a lot, I'll be back here for sure. Thanks for your help.
  • g
    this is my working example that just removes "disabled" attribute and clicks https://github.com/bahmutov/cypress-examples/commit/394c4b166b253a2ad1fa689b454b6d4eac0514fc For anything more, I would need html plus some code to simulate loading / removing elements. I bet there is more going on
  • p
    I believe you. - 4-6 out of 10 times it work on my end. I am assuming something wrong on my side (not cypress) till now. - The mixture of should and click generally is expected to work regardless the use case. Even though in my case, it reduntant cuz it has the check built-in anyways. It's just an ugly workaround for now. Till I figure out the first point (is it really my side or cypress)
  • p
    But that shouldn't change the fact that we should be able to use should and then action like click.
  • g
    Sure, but without a reproducible example 🤷🏻‍♂️
  • g
    Also: here is an example of finding the button inside a div that contains a label with text using a single command https://github.com/bahmutov/cypress-examples/commit/89d3bed65dadbaa2f2aaa5e99766f2ccbe2f02d3
  • p
    I'll try to figure out the behavior, did it wait enough time, etc... And isolate the problem.
  • p
    Yes, this is part of exactly what I'm doing.
  • p
    We have few rules while writing tests, minimize classes and more of write English. But I can promise you getting the right specific element is done right, cuz everytime it fails, first thing I always check "did it get the element? And is it the only one?"
  • p
    Ahh, you were referring to the why .parent() 😂. My answer is button might have different text. But the label next to it is always the same
  • p
    Checkout ngx-dropdown-select.